<template>
  <div style="height:100%">
      <Layout>
          <Header>
              <Menu mode="horizontal" theme="dark">
                  <div class="layout-logo">
                      <img src="/static/image/zt.png" alt="">
                  </div>
                  <div class="layout-nav">
                      <MenuItem name="1">
                          <Icon type="ios-navigate"></Icon>
                          {{username}}
                      </MenuItem>
                      <MenuItem name="2">
                          <Icon type="ios-keypad"></Icon>
                          消息
                      </MenuItem>
                      <MenuItem name="3" @click.native="logout">
                          <Icon type="ios-log-out"/>
                          退出
                      </MenuItem>
                  </div>
              </Menu>
          </Header>
          <Layout>
              <Sider hide-trigger :style="{background: '#495060'}">
                  <Menu theme="light" width="auto">
                      <MenuItem name="1-1"><router-link to="/add"><Icon type="ios-paper"></Icon>新建文章</router-link></MenuItem>
                      <MenuItem name="1-2"><router-link to="/article"><Icon type="ios-gear"></Icon>文章管理</router-link></MenuItem>
                      <MenuItem name="1-3"><router-link to="/articleType"><Icon type="ios-gear"></Icon>文章分类</router-link></MenuItem>
                      <MenuItem name="1-4"><router-link to="/photo"><Icon type="ios-gear"></Icon>照片上传</router-link></MenuItem>
                      <MenuItem name="1-5"><router-link to="/photoType"><Icon type="ios-gear"></Icon>相册类型上传</router-link></MenuItem>
                      <MenuItem name="1-6"><router-link to="/photoControl"><Icon type="ios-gear"></Icon>相册管理</router-link></MenuItem>
                  </Menu>
              </Sider>
              <Layout :style="{padding: '40px 24px 24px'}">
                  <Content :style="{padding: '24px', minHeight: '280px', background: 'rgba(253, 243, 235, 0.41)'}">
                      <router-view/>
                  </Content>
              </Layout>
          </Layout>
      </Layout>
  </div>
</template>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }
    .ivu-layout-header{
        padding: 0 20px;
    }
    .layout-logo{
        width: 130px;
        height: 50px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 8px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
        margin-right: 20px;
    }
    .ivu-icon{
        padding:0px 10px;
    }
    a{
        color:black;
    }
    .ivu-menu-item-selected,.ivu-menu-item-selected .ivu-icon{
       
    }
    .ivu-menu-vertical .ivu-menu-item-selected:hover{
      
    }
    .ivu-menu-item-selected a{
        color: black!important;
    }
    .headerTip{
        height: 40px;
        line-height: 40px;
        background-color: white;
        padding: 0 30px;
        position: absolute;
        width: 100%;
        margin-left: 200px;
        box-shadow: 1px 1px 9px #cccccc7d;
    }
    .ivu-menu-item a{
        color: white;
    }
    .ivu-menu-vertical .ivu-menu-item:hover a, .ivu-menu-vertical .ivu-menu-submenu-title:hover a {
        color: black;
    }
    .ivu-menu-light {
    background: #495060;
     }
    .ivu-menu-item-active,.ivu-menu-item-selected{
            background: white;
        }
</style>
<script>
    import commonFunc from '../../../../static/js/public'
    export default{
        data(){
             return{
                  username:''
             }
        },
        mounted:function () {
                this.username =commonFunc.getCookie('username');
        },
        methods:{
            logout(){
                let _shelf = this;
                commonFunc.delCookie('username');
                commonFunc.delCookie('access_token');
                _shelf.$router.push({path:'/'});
            }

        }

    }

</script>